<template>
        <!--顶部导航栏 start-->
        <ExamMenu/>
    <!--顶部导航栏 end-->
    <div class="detail-page">
      <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      <el-card v-if="detail" class="detail-card">
        <template #header>
          <h2 class="detail-title">{{ detail.title }}</h2>
          <div class="detail-time">
            发布时间：{{ detail.createTime }}
          </div>
        </template>
        <div class="detail-content" v-html="detail.content" ref="markdownContent">
        </div>
        
        <!-- 新增发布者信息 -->
        <div class="detail-footer">
            <div class="stamp-effect">
            <div class="stamp-content">
                <span class="stamp-name">{{ detail.realName }}</span>
                <span class="stamp-date">{{ formatDateShort(detail.createTime) }}</span>
            </div>
            </div>
        </div>
      </el-card>
      <div v-else class="no-data">公告不存在</div>
    </div>
     <!--底部 start-->
     <ExamFooter/>
    <!--底部 end-->
  </template>
  
  <script setup lang="ts">
  import { computed,ref,onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import type { Notice } from '@/types/notice'
  import ExamFooter from '@/components/comm/ExamFooter.vue';
  import ExamMenu from '@/components/comm/ExamMenu.vue';
  import { getNoticeDetailApi } from '@/api/index'
  import { formatDateShort } from '@/utils/dateUtils'
  const route = useRoute()

  //获取公告ID
  const noticeId = computed(() => Number(route.params.id))
  
  // 这里应该根据ID从API获取数据，这里使用模拟数据
  const detail: Notice = ref([
  ])

  // 根据ID查找公告
  const loadData = async () => {
    try {
      const { data } = await getNoticeDetailApi(noticeId.value)
      detail.value = data
    } catch (error) {
      
    }
  }
  
onMounted(() => {
  loadData()
})
  

  </script>
  
  <style lang="scss" scoped>
.detail-page {
  padding: 20px;
  position: relative;
  max-width: 1420px;
  margin: 0 auto;

  .detail-card {
    margin-top: 20px;
    min-height: 500px;
    display: flex;
    flex-direction: column;

    .detail-title {
      color: #409EFF;
      margin-bottom: 10px;
    }

    .detail-time {
      color: #999;
      font-size: 14px;
    }

    .detail-content {
      line-height: 1.8;
      color: #666;
      white-space: pre-wrap;
      flex: 1;
    }

    .detail-footer {
      position: relative;
      margin-top: auto;
      padding-top: 20px;
      border-top: 1px solid #eee;
      min-height: 80px; // 确保有足够空间
      .publisher-info {
        display: flex;
        justify-content: flex-end;
        gap: 20px;
        color: #999;
        font-size: 14px;

        .publisher-name {
          color: #ff9933;  // 使用辅助色
          font-weight: 500;
        }
      }
    }
  }

  .no-data {
    margin-top: 20px;
    color: #999;
    text-align: center;
  }



  // 底部样式 start
  .stamp-effect {
    position: absolute;
    right: 30px;
    bottom: -159px;
    transform: rotate(-15deg);
    transform-origin: right bottom; // 关键：以右下角为旋转基点
    z-index: 1;
    animation: stampZoom 0.3s ease-out;

    &::before {
      content: '';
      position: absolute;
      right: -10px;
      left: auto;
      width: 110%;
      height: 110%;
      border: 2px solid #ff3333;
      border-radius: 50%;
      opacity: 0.8;
      box-shadow: 0 2px 8px rgba(255, 51, 51, 0.3);
    }

    &::after {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      background: radial-gradient(circle at 50% 150%, 
        rgba(255,255,255,0.6) 0%,
        rgba(255,255,255,0.3) 30%,
        rgba(255,51,51,0.1) 100%);
      mix-blend-mode: overlay;
      border-radius: 50%;
    }

    .stamp-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.2;
      color: #ff3333;
      font-family: 'Microsoft YaHei', SimHei, sans-serif;

      .stamp-name {
        font-size: 16px;
        font-weight: bold;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }

      .stamp-date {
        font-size: 12px;
        margin-top: 4px;
        opacity: 0.9;
      }
    }
  }

  // 底部样式 end

}


@keyframes stampZoom {
  0% {
    transform: rotate(-15deg) scale(5) translate(50%, 50%);
    opacity: 0;
  }
  80% {
    transform: rotate(-12deg) scale(1.1);
  }
  100% {
    transform: rotate(-15deg) scale(1) translate(0, 0);
    opacity: 1;
  }
}
</style>